<!--
 * @Description: file content
-->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标题" width="180" prop="title"> </el-table-column>
      <el-table-column label="类别">
        <template #default="scope">
          <span class="center">{{
            NEWS_CATEGORY.find((i) => i.value === scope?.row?.category)?.label
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编辑时间">
        <template #default="scope">
          <span class="center">{{ dayjs(scope?.row?.editTime).format('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="封面图片">
        <template #default="scope">
          <div class="center" v-if="scope.row.coverPicture">
            <el-avatar :src="baseUrl + scope.row.coverPicture" :size="50" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否发布">
        <template #default="scope">
          <div class="center">
            <el-switch
              @change="handleSwitch(scope.row)"
              v-model="scope.row.isPublish"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.row)" />
          <el-button type="primary" :icon="Star" circle @click="handleSee(scope.row)" />
          <el-popconfirm
            title="确定删除吗?"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="seeVisible" title="新闻信息">
      <h2>{{ seeData.title }}</h2>
      <span>{{ dayjs(seeData.editTime).format('YYYY-MM-DD') }}</span>
      <el-divider />
      <div v-html="seeData.content "></div>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref,  } from 'vue';
import { NEWS_CATEGORY, baseUrl } from '@public/index.js';
import { ElMessage, dayjs } from 'element-plus';
import { useRouter } from 'vue-router';
import { Delete, Edit, Star } from '@element-plus/icons-vue';
const router= useRouter();
const tableData = ref([]);
const seeData = ref();
const seeVisible = ref(false);
const getData = async () => {
  const res = await axios.get('/adminApi/news/list');
  if (res.code === 200) {
    tableData.value = res.data;
  }
};
const handleEdit = async (row) => {
  router.push(`/news-manage/edit-news/${row._id}`);
};
const handleSee = async (row) => {
  seeData.value = row;
  seeVisible.value = true;
};
const handleSwitch = async (row) => {
  axios
    .put('/adminApi/news/publish', {
      _id: row._id,
      isPublish: row.isPublish
    })
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);

        getData();
      }
    });
};
const handleDelete = async (index, row) => {
  axios.delete(`/adminApi/news/list/${row._id}`).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: 'success'
      });
      getData();
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
